<template>
  <div id="box">
    <!-- 输入框搜索的盒子 -->
    <div id="inputBox">
      <searchInput></searchInput>
    </div>
    <!-- 下拉菜单的盒子 -->
    <div id="selectBox">
      <div>
        <span>选择班级：</span>
        <el-select v-model="value" filterable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 导出excel文件的盒子 -->
    <div id="outBox">
      <button>
        <i class="el-icon-document-copy"></i>
        <span>导出excel数据</span>
      </button>
    </div>
    <!-- 表格的盒子 -->
    <div id="tabBox">
      <tableCom></tableCom>
    </div>
  </div>
</template>

<script>
import searchInput from "@/components/Search";
import tableCom from "@/components/Table";
export default {
  components: {
    searchInput,
    tableCom,
  },
  data() {
    return {
      //下拉框的数据
      options: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "123",
        },
        {
          value: "选项3",
          label: "asd",
        },
        {
          value: "选项4",
          label: "软件二班",
        },
        {
          value: "选项5",
          label: "数据可视化二班",
        },
      ],
      value: "",
    };
  },
};
</script>

<style lang="less" scoped>
#inputBox {
  margin-bottom: 30px;
}
#selectBox {
  margin-bottom: 20px;
  color: grey;
}
#outBox {
  position: relative;
  height: 30px;
  button {
    height: 30px;
    width: 130px;
    border-radius: 5px;
    border-color: #ccc;
    background: white;
    position: absolute;
    right: 15px;
    span {
      padding-left: 5px;
    }
  }
}
#tabBox {
  margin: 10px;
}
</style>
